import React from "react"
import { Avatar, Button, Dropdown, Image, Layout, message, Modal } from "antd"
import dayjs from 'dayjs'
import { api_system } from "@/apis";
import { formatDuration } from "@/utils/common";

interface Props {
    now: number;
    nickname: string;
    duration: number;
}
const Header = (props: Props) => {
    const { now, duration, nickname } = props
    return <Layout.Header className="flex items-center justify-between " style={{ padding: '0 16px' }}>
        <div className="flex items-center justify-between text-white">
            <Image preview={false} src="/favicon.ico" alt="logo" height={48}/>
            <span className="pl-4" style={{ fontSize: '20px' }}>REACT APP</span>
        </div>
        <div className="flex items-center text-right text-white">
            <div className="px-2 hidden md:block">已运行: {duration && formatDuration(Math.floor(duration / 1000))}</div>
            <div className="px-2 hidden md:block mr-4">服务器时间: {now && dayjs(now).format('YYYY-MM-DD HH:mm:ss')}</div>
            <Avatar size={32} style={{
                background: 'var(--color-fuchsia-700)',
            }}>{nickname?.charAt(0)}</Avatar>
            <Dropdown menu={{ items: [
                { key: 'admin', label: '系统管理', onClick: () => window.open('/admin'), },
                { key: 'logout', label: '退出登录', onClick: () => window.location.href = '/logout', },
                { key: 'shutdown', label: '关闭服务器', onClick: () => Modal.confirm({
                    title: '确定要关闭服务器吗？',
                    onOk: async () => {
                        const res = await api_system.shutdown()
                        if (res.status === 200) {
                            message.success('服务器已关闭')
                        }
                    }
                }) },
            ] }}>
                <Button size="small" type="link" >
                    <span className="px-2 font-bold text-white">{nickname}</span>
                </Button>
            </Dropdown>
        </div>
    </Layout.Header>
}

export default Header